<template>
    <form class="form-horizontal" role="form" id="imgupload1" v-on:submit.prevent>
        <input type="hidden" value="{{accessToken}}" name="accessToken">
        <div class="fileInput1">
            <input type="file" name="file" class="upfile1" />
            <input class="upFileBtn1" type="button" value="上传文件" />
            <a :href="filerurl" :class="{none:filerurl==''}">{{uploadfilename}}</a>
        </div>
    </form>
</template>
<script>
import Public from 'assets/public.js'
module.exports = {
    data() {
            return {
                accessToken: Public.getsessionStorage("accessToken"),

            }
        },
        ready() {
            var that = this;
            // console.log(this.filerurl);
            // if(this.filerurl!=""){
            //     $(".upfile").siblings('img').show()
            //             .siblings('div').show();
            // }
            $(".upFileBtn1").on('click', function(event) {
                event.preventDefault();
                $(this).prev(".upfile1").click();

            });
            // $(".fileInput1").on('click', "div", function(event) {
            //     event.preventDefault();
            //     that.filerurl = "";
            //     $(this).hide().siblings('a').attr({
            //             href: ''
            //         }).hide()
            //         .siblings('.upfile1').val("");
            // });
            $(".upfile1").on('change', function(event) {
               
                event.preventDefault();
                var $that = $(this)
                var file1 = $that[0].files[0];
                // this.filename=file.name;
                // console.log(file);
                // if (!/image\/\w+/.test(file.type)) {
                //     alert("请确保文件为图像类型");
                //     return false;
                // };
                var reader1 = new FileReader();
                reader1.readAsDataURL(file1);
                reader1.onload = function() {
                    // $that.siblings('a').attr({
                    //         href: this.result
                    //     }).show().html(file.name)
                    //     .siblings('div').show();
                    $.when(Public.formajax(Public.IMGUPLOAD_URL(), "#imgupload1"))
                        .done(function(res) {
                               
                                Public.ajaxPrompt("上传成功")
                                var data = JSON.parse(res);
                                that.filerurl = Public.IMGVIEW_URL() + data.id;
                                that.uploadfilename=file1.name ;
                                that.$dispatch('servicefileId', data.id)
                          

                        })

                }
            });
        },
        props: {
            filerurl: {
                type: String,
                default: ""
            },
            uploadfilename: {
                type: String,
                default: ""
            },
        },
        methods: {
            // saveimg() {
            //     var that = this;
            //     $.when(Public.formajax(Public.IMGUPLOAD_URL(), "#imgupload"))
            //         .done(function(data) {
            //             Public.ajaxPrompt("上传成功")
            //             var data = JSON.parse(data);
            //             that.filerurl = Public.IMGVIEW_URL() + data.id;
            //             that.$dispatch('serviceIconId', data.id)
            //         })
            // }
        },

}
</script>
<style scoped>
/*头部*/

.fileInput1 {
    width: 100%;
    height: 50px;
    background: url(../assets/img/addimg.jpg) no-repeat left center;
    position: relative;
    float: left;
    background-size: auto 100%;
    margin: 0 10px;
}

.fileInput1 a {
    width: 280px;
    height: 50px;
    line-height: 25px;
    margin-left: 20px;
    display: inline-block;
    float: right;
}

.fileInput1 a.none {
    display: none;
}


/*.fileInput1 div {
    position: absolute;
    top: -8px;
    right: -8px;
   display: none;
    background: #32BE81;
    width: 16px;
    height: 16px;
    z-index: 2;
    border-radius: 8px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    line-height: 14px
}*/

.upfile1 {
    display: none
}

.upFileBtn1 {
    width: 50px;
    height: 50px;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    float: left;
}

#imgupload1 button {
    margin-top: 8px;
}
</style>
